<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>地区分布统计</title>
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="$request.getContextPath()/resources/highmaps/highcharts.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/highcharts/modules/exporting.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/highmaps/modules/map.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/highmaps/modules/data.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/highmaps/modules/drilldown.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/highmaps/mapdata/cn-china-by-peng8.js" charset="UTF-8"></script>
<style type="text/css">
body,.container-fluid,.container-fluid #areaContainer{
   width: 100%;
   height: 100%;
   position: absolute;
   padding:0px;
   margin:0px;
}
.highcharts-credits{
   visibility: hidden;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
</style>
<script type="text/javascript">
$(function () {
    Highcharts.setOptions({
        lang:{
            drillUpText:"返回 "
        }
    });
    var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']),small = $('#areaContainer ').width() < 400;
    $.each(data, function (i) {
        this.drilldown = this.properties['drill-key'];  
        this.value=i;
    });
	function getPoint(e){
	    console.log(e.point.name);
	}
	//初始化地图
	$('#areaContainer ').highcharts('Map', {
		chart : {
       		events: {
                drilldown: function (e) {
                  if (!e.seriesOptions) {
                     var chart = this;
                     var cname=e.point.properties["cn-name"]; //cname =获取到的 “cn-name”
                     chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); //加载中 
                     //$.get("$request.getContextPath()/common/download/json?url=http://data.hcharts.cn/jsonp.php?filename=GeoMap/json/"+ e.point.drilldown+".geo.json");
                     //console.log("http://data.hcharts.cn/jsonp.php?filename=GeoMap/json/"+ e.point.drilldown+".geo.json");
                     // 加载城市数据
                     $.get("$request.getContextPath()/resources/highmaps/mapdata/data/"+e.point.drilldown+".geo.json",function(json){
                         data = Highcharts.geojson(json);
                         $.each(data, function (i) {  
                             this.value = i;//随机值，进入省份以后城市的值
							 this.events={};
                             this.events.click=getPoint;
						  });
						  chart.hideLoading();
						  chart.addSeriesAsDrilldown(e.point, {
                            	name: cname,
                            	data: data ,
                            	dataLabels : {
                                	enabled: true,
                                	format: '{point.name}'//设置name这里显示的是 各省的城市数据
                            	}
                            });
					   });
        		   }
                   this.setTitle(null, { text: cname }); //这显示 图右侧 省份名称，可以回退
               },
               drillup:  function () {
                   this. setTitle(null, { text: '中国' }); //右侧 显示中国，进入省份则显示省份
               }
             }
        },
        title : {
            text : '用户注册分布图(中国地图  )'
        },
        subtitle: {
            text: "",
            floating: true,
            align: 'right',
            y: 50,
            style: {
                fontSize: '16px'
            }
        },
        legend: small ? {} : {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        colorAxi: {
        	min: 1,
            type: 'logarithmic',
            minColor: '#EEEEFF',
            maxColor: '#000022',
            stops: [
                [0, '#EFEFFF'],
                [0.67, '#4444FF'],
                [1, '#000022']
            ]
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        plotOptions: {
            map: {
            	joinBy: ['cn-name'],
                states: {
                    hover: {
                        color: '#EEDD66'  
                    }
                }
            }
        },
        series : [{
        	animation: {
                duration: 1000
            },
        	data : data,
            name: '注册分布图',
            states: {
                hover: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                format: '{point.properties.cn-name}'//设置显示形式，这里显示的是 各城市名称
            },
            tooltip: {
                pointFormat: '{point.properties.cn-name}: {point.value}人'
            }
        }],
        drilldown: {
            activeDataLabelStyle: {
                color: '#FFFFFF',
                textDecoration: 'none',
                textShadow: '0 0 10px #000000'
            },
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    x: 0, //水平偏移距离
                    y: 60
                }
            }
        }
    });
}); 
</script>
</head>
<body>
<div class="container-fluid">
	<div id="areaContainer"></div>
</div>
</body>
</html>